<template>
    <BaseExercise title="拼写练习">
        <template #question>
            <SimpleWord
                class="mb-4 transition"
                :class="
                    exercise.resultCorrect != undefined
                        ? ''
                        : 'blur select-none'
                "
                :word="exercise.word"
            />
            <PhoneticSymbol
                class="mb-4 transition"
                :class="
                    exercise.resultCorrect != undefined
                        ? ''
                        : 'blur select-none'
                "
                :word="exercise.word"
                :canplay="exercise.resultCorrect != undefined"
            />

            <WordMeaning :word="exercise.word" />
        </template>

        <template #answer>
            <div class="flex flex-col items-center">
                <input
                    ref="inputRef"
                    autofocus
                    @keypress.enter="handleClick"
                    v-model.trim="userIn"
                    :disabled="exercise.result != undefined"
                    class="outline-none border-b text-xl px-4 py-2 my-8 text-center disabled:bg-transparent animated"
                    :class="
                        exercise.resultCorrect == undefined
                            ? ''
                            : exercise.resultCorrect
                            ? 'text-green border-green' +
                              (playAnimation ? ' animated-pulse' : '')
                            : 'text-red border-red' +
                              (playAnimation ? ' animated-head-shake' : '')
                    "
                />
                <button
                    :class="
                        exercise.resultCorrect == undefined ? '' : 'opacity-0'
                    "
                    class="text-xl px-8 py-2 rounded bg-blue text-white transition"
                    @click="handleClick"
                >
                    提交
                </button>
            </div>
        </template>
    </BaseExercise>
</template>

<script setup lang="ts">
    import { ChineseSpellingEnglishExercise } from "../../model"
    import { onMounted, onUnmounted, ref, watch } from "vue"
    import { useTimekeeping } from "../../utils"
    import BaseExercise from "./BaseExercise.vue"
    import SimpleWord from "../word/SimpleWord.vue"
    import WordMeaning from "../word/WordMeaning.vue"
    import PhoneticSymbol from "../word/PhoneticSymbol.vue"

    const props = defineProps<{
        exercise: ChineseSpellingEnglishExercise
        actived: boolean
    }>()

    const inputRef = ref()

    onMounted(() => {
        document.addEventListener("keyup", handleKeyup)
    })

    onUnmounted(() => {
        document.removeEventListener("keyup", handleKeyup)
    })

    function handleKeyup(e: KeyboardEvent) {
        if (!props.actived) {
            return
        }
        if (e.code == "Space") {
            inputRef.value.focus()
        }
    }

    const userIn = ref("")
    userIn.value = props.exercise.result ?? ""
    const playAnimation = ref(false)

    watch(
        () => props.exercise,
        (e) => {
            userIn.value = e.result ?? ""
            playAnimation.value = false
        }
    )

    const timekeeping = useTimekeeping()

    function handleClick() {
        if (props.exercise.result != undefined) {
            return
        }
        playAnimation.value = true
        props.exercise.timekeeping = timekeeping.value
        props.exercise.result = userIn.value
        props.exercise.resultCorrect = props.exercise.word == userIn.value
    }
</script>
